<template>
    <div class="xl-form"  v-loading="loading" :style="loading?{height:defH+'px'}:''"
         ref="module-content">
        <div v-for="(res,index) in tableData" :key="index" v-if="index<showSize">
            <div class="xl-field-module">
                <div class="xl-field-content">
                    <div class="field-item">
                        <div class="xl-field">
                            <div class="xl-form-item">
                                <p>
                                    <span class="xl-form-content">
                                        <span class="h-title">{{item.createBy||'-'}}</span>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="field-item">
                        <div class="xl-field">
                            <div class="xl-form-item">
                                <p>
                                    <span class="xl-label" style="text-align: left;">
                                        <span>文件名</span><i class=colon>:</i>
                                    </span>
                                    <span class="xl-form-content">
                                        <span>{{item.fileName}}</span>
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="xl-field">
                            <div class="xl-form-item">
                                <p>
                                    <span class="xl-label" style="text-align: left;">
                                        <span>文件描述</span><i class=colon>:</i>
                                    </span>
                                    <span class="xl-form-content">
                                        <span>{{item.description||'-'}}</span>
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="xl-field">
                            <div class="xl-form-item">
                                <p>
                                    <span class="xl-label" style="text-align: left;">
                                        <span>文件大小</span><i class=colon>:</i>
                                    </span>
                                    <span class="xl-form-content">
                                        <span>{{$filter.FormatFlowUnit(item.fileSize)}}</span>
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="xl-field">
                            <div class="xl-form-item">
                                <p>
                                    <span class="xl-label" style="text-align: left;">
                                        <span>导入时间</span><i class=colon>:</i>
                                    </span>
                                    <span class="xl-form-content">
                                        <span>{{$filter.FormatDate(item.createTime)}}</span>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="field-item" style="text-align: right;">
                        <el-row>
                            <span class="approved-text blue-bg-color" v-if="item.approvalStatus===1">审批通过</span>
                            <span class="approved-text black-bg-color" v-else>审批拒绝</span>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="total>defsize">
            <div class="data-title" v-if="showSize<total">
                <p class="change-show" @click="loadMore()">
                    <span class="word-blue-color">余下</span>
                    <span class="word-red-color">{{surplus}}</span>
                    <span class="word-blue-color">条内容</span>
                    <span class="el-icon-caret-bottom"></span>
                </p>
            </div>
            <div class="data-title" v-else>
                <p class="change-show" @click="up()">
                    <span class="word-blue-color">收起</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'template-field',
  components: {},
  data() {
    return {
      defsize: 8,
      size: 8,
      currentSize: 0,
      loading: false,
      full: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [{}, {}, {}, {}],
      queryform: {
        fileState: 1,
        approvalStatus: 1
      },
    }
  },
  props: ['params'],

  computed: {
    showSize() {
      return this.size;
    },
    surplus() {
      return this.total - this.size;
    }
  },
  methods: {
    up() {
      this.size = this.defsize;
    },
    loadData() {
      this.full = false;
      this.loading = true;
      this.$axiosInstance({
        method: 'get',
        url: '/file/filelist',
        params: {
          pageIndex: (this.currentPage),
          pageSize: this.pageSize,
          ...this.queryform
        }
      }).then(res => {
        let { code, data } = res.data;
        if (code === 200) {
          this.currentSize = data.dataInfo.length;
          this.tableData = data.dataInfo;
          this.total = data.resultCount;
        }
        this.loading = false;
      });
    },
    loadMore(call) {
      if (this.full === false) {
        // this.module.size 当前页数量
        if (this.currentSize - this.size > 0) {
          if (this.size + 6 >= this.currentSize) {
            this.size += this.currentSize - this.size;
            console.info('第一页显示完成')
          } else {
            // 默认增加6条记录
            this.size += 6;
          }
        } else {

          this.$axiosInstance({
            url: '/file/filelist',
            method: 'get',
            params: {
              pageIndex: (this.currentPage+1),
              pageSize: this.pageSize,
              ...this.queryform
            },
          }).then(res => {
            let { code, data } = res.data;
            if (code === 200) {
              data.dataInfo.forEach(d => {
                this.tableData.push(d);
              });
              this.currentSize = data.dataInfo.length;
              this.size += this.currentSize;
              this.currentPage+=1;
              if (this.size >= this.total) {
                this.full = true;
              }
            }
            if (call) call();
          });
        }
      } else {
        this.size = this.total;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.defH = this.$refs['module-content'].clientHeight;
    })
  },
  created() {
    this.loadData();
  }
}
</script>

<style scoped>

</style>
